<template>
  <div class="list-panel">
    <div class="listItme">
      <img :src="loadingSuccess" alt="" srcset="" />
      角色声音模拟
    </div>

    <div class="listItme">
      <img :src="uploadLoading" alt="" srcset="" />
      情感、语速模拟
    </div>

    <div class="listItme noLoading">
      <div class="status"></div>
      听力音频生成
    </div>

    <div class="audio-player">
      <div>
        <audio controls :src="audioUrl" />
        <span>{{ duration }}</span>
      </div>
      <div class="download" @click="download">
        <img :src="downloadData" alt="" srcset="" />
        下载
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.list-panel {
  .listItme {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #1a1a1a;
    line-height: 22px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  }

  .noLoading {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #a4a4a4;
    line-height: 22px;

    .status {
      margin-right: 8px;
      width: 16px;
      height: 16px;
      position: relative;

      &::after {
        content: '';
        width: 6px;
        height: 6px;
        background: #504f4f;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 50%;
      }
    }
  }

  .audio-player {
    background: #f9f9f9;
    border-radius: 8px;
    margin-top: 20px;

    .download {
      width: 84px;
      height: 32px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #eeeeee;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 8px;
      cursor: pointer;

      img {
        width: 16px;
        height: 16px;
      }
    }
  }
}
</style>

<script setup lang="ts">
import { ref } from 'vue';
import uploadLoading from '@/assets/ai/uploadLoading.gif';
import loadingSuccess from '@/assets/ai/loadingSuccess.svg';
import downloadData from '@/assets/ai/download.svg';

const useCharacterVoice = ref(true);
const useEmotionSpeed = ref(false);
const audioUrl = ref('');
const duration = ref('3:20');

const canGenerate = ref(true);

const download = () => {};
</script>
